<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>VUE路由-简单实例</title>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
        <script type="text/javascript" src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>导航条</h1>
            <p>
                <router-link to="/message">消息列表</router-link>
                <router-link to="/friends">好友列表</router-link>
            </p>
            <router-view></router-view>
        </div>
    </body>
    <script type="text/javascript">
        var messagesComponent = {
            template: 
                '<div>' + 
                '<div><p>第1条消息</p></div>' + 
                '<div><p>第2条消息</p></div>' + 
                '<div><p>第3条消息</p></div>' + 
                '<div><p>第4条消息</p></div>' + 
                '</div>'
        };
        var friedsComponent = {
            template: 
                '<div>' + 
                '<div><p>第1个好友</p></div>' + 
                '<div><p>第2个好友</p></div>' + 
                '<div><p>第3个好友</p></div>' + 
                '<div><p>第4个好友</p></div>' + 
                '</div>'
        };

        // 定义路由路径数组
        var routeArr = [
            {path: '/message', component: messagesComponent},
            {path: '/friends', component: friedsComponent}
        ];

        // 定义路由器
        var myRouter = new VueRouter({
            routes: routeArr
        });

        // 绑定路由器
        var appVue = new Vue({
            router: myRouter
        }).$mount('#app');
    </script>
</html>